本文提及以下內容
官方說明對於頁面檔的觀念如下
Pages created in the src/pages directory use the name of the file as the route for the page.
For example, if you had a file called src/pages/garden-gnomes.js, you could access that page at localhost:8000/garden-gnomes.
大致意思是頁面檔只要建立在src/pages
的資料底下就能夠創建pages component
。
接下來將會開始進入實作環節。
我們建立了一個react的component,接下來再pages的資料夾建立js檔案的時候,gatsby就會自動將其變成一個路由
首先我們觀看以下的資料夾結構。
├─images
│ icon.png
│
└─pages
404.js
index.js
我們在此添加了一個hello.js
├─images
│ icon.png
│
└─pages
404.js
++ hello.js
index.js
在檔案裡面我們新增了一個函式如下
import React from "react";
const hello = () => {
return <div>Hello world</div>;
};
export default hello;
在此當我們npm run start
的時候
在pages的頁面就能夠擁有hello的route
如下圖
我們在頁面檔底下添加一個Head的函式
透過在頁面檔export Head函式就能自動幫我們添加到實際頁面的<head>
的地方
例如在hello.js頁面檔如下
import React from "react";
const hello = () => {
return <div>Hello world</div>;
};
export default hello;
export const Head = () => (
<>
<title>Hi</title>
<meta name="description" content="Your description" />
</>
);
這時候我們重新整理就能發現該內容被添加到了頁面標題
如下圖
gatsby提供了Link的component
來實作跳轉頁面
以下方為兩個階段
Intersection Observer API
低優先級預先加載
onMouseOver event事件
轉為高優先級加載更新
上述兩個預加載階段的實現式確保在點擊跳轉頁面的時候能夠更迅速的準備好render。
使用Gatsby與先前提到React route如何運作、建立404的路由、巢狀路由、動態路由的react route不一樣的地方是他幫我們多加處理了預加載以至於當我們在使用gatsby可以達到更好的UX。
我們透過從gatsby引入Link然後添加在頁面上,
如下程式碼藉由Link component的方式,我們就能夠跳轉到某個路由了。
import React from "react";
import { Link } from "gatsby";
const hello = () => {
return (
<>
<div>
Hello ,回到我的頁面吧<Link to="/">我的頁面</Link>!
</div>
</>
);
};
export default hello;
export const Head = () => (
<>
<title>Hi</title>
<meta name="description" content="Your description" />
</>
);
最後應當能看到下圖